<template>

  <div class="main">
    <el-row>
      <el-col :span="4" class="cols">123</el-col>
      <el-col :span="20" class="cols">

        <el-form :model="form" label-width="auto" style="max-width: 600px">
          <!--基本信息-->
          <div class="mod">
            <el-form-item label="商品分类：">
              <el-tree-select v-model="categoryCode" :data="tree" check-strictly :render-after-expand="false"
                :props="defaultProps" class="sel" />
            </el-form-item>

            <el-form-item label="商品名称：" required>
              <el-input class="inp" placeholder="请输入商品名称"></el-input>
            </el-form-item>

            <el-form-item label="规格型号：" required>
              <el-input class="inp" placeholder="请输入规格型号"></el-input>
            </el-form-item>

            <el-form-item label="商品编号：" required>
              <el-input class="inp" placeholder="请输入商品编号"></el-input>
            </el-form-item>

            <el-form-item label="计量单位：" required>
              <el-input class="inp" placeholder="请输入单位"></el-input>
            </el-form-item>

            <el-form-item label="商品条码：">
              <el-input class="inp" placeholder="请输入商品条码"></el-input>
            </el-form-item>

            <el-form-item label="首选仓库：">
              <el-input class="inp" placeholder="请输入商品条码"></el-input>
            </el-form-item>
          </div>

          <div class="mod">
            <!--价格策略-->
            <el-form-item label="零售售价：">
              <el-input class="inp" placeholder="请输入商品售价"></el-input>
            </el-form-item>

            <el-form-item label="批发价：">
              <el-input class="inp" placeholder="请输入商品批发"></el-input>
            </el-form-item>

            <el-form-item label="vip客户价：">
              <el-input class="inp" placeholder="请输入商品价格"></el-input>
            </el-form-item>

            <el-form-item label="折扣率一(%)：">
              <el-input class="inp" placeholder="请输入折扣率"></el-input>
            </el-form-item>

            <el-form-item label="折扣率二(%)：">
              <el-input class="inp" placeholder="请输入折扣率"></el-input>
            </el-form-item>

            <el-form-item label="预计采购价：">
              <el-input class="inp" placeholder="请输入商品预计采购价"></el-input>
            </el-form-item>
          </div>

          <div class="mod">
            <!--库存初期设置-->
            <el-form-item>
              <el-table :data="tableData" ref="tableRef" style="width: 100%" border stripe @cell-click="dbcell"
                :header-cell-style="{ 'text-align': 'center', 'font-size': '14px', color: '#666666', borderColor: '#e0e0e0', }"
                :cell-style="{ 'text-align': 'center', 'font-size': '12px', color: '#666666', borderColor: '#e0e0e0', }">

                <el-table-column type="index" width="80" />
                <el-table-column width="80">
                  <template v-slot="{ row, column }">
                    <svg @click="addRow" class="ic" xmlns="http://www.w3.org/2000/svg" width="2em" height="2em"
                      viewBox="0 0 24 24">
                      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"
                        d="M15 12h-3m0 0H9m3 0V9m0 3v3m10-3c0 4.714 0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2c4.714 0 7.071 0 8.535 1.464c.974.974 1.3 2.343 1.41 4.536" />
                    </svg>

                    <svg @click="remove(row)" class="ic" xmlns="http://www.w3.org/2000/svg" width="2em" height="2em"
                      viewBox="0 0 48 48">
                      <g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="4">
                        <rect width="36" height="36" x="6" y="6" rx="3" />
                        <path stroke-linecap="round" d="M16 24h16" />
                      </g>
                    </svg>

                  </template>



                </el-table-column>

                <el-table-column prop="goodsname" label="仓库">

                </el-table-column>

                <el-table-column prop="goodsname" label="期初数量">
                  <template v-slot="{ row, column }">
                    <span v-if="row.show[column.property] == undefined">{{ row.goodsname }}</span>
                    <el-input @click="showGoods = true" v-else v-model="row.goodsname" @blur="row.show = {}"></el-input>
                  </template>
                </el-table-column>

                <el-table-column prop="goodsname" label="单位成本">
                  <template v-slot="{ row, column }">
                    <span v-if="row.show[column.property] == undefined">{{ row.goodsname }}</span>
                    <el-input @click="showGoods = true" v-else v-model="row.goodsname" @blur="row.show = {}"></el-input>
                  </template>
                </el-table-column>

                <el-table-column prop="goodsname" label="期初总价">
                  <template v-slot="{ row, column }">
                    <span v-if="row.show[column.property] == undefined">{{ row.goodsname }}</span>
                    <el-input @click="showGoods = true" v-else v-model="row.goodsname" @blur="row.show = {}"></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>

          </div>


        </el-form>





      </el-col>


    </el-row>
  </div>

</template>

<script setup>
import { ref, onMounted } from 'vue';
import { querytree } from '@/api/set/goodsCategory.js'
import { ElMessage } from "element-plus";
//分类树
let tree = ref([]);
//table引用
const tableRef = ref(null);
//仓库列表
const tableData = ref([]);

//分类树属性
const defaultProps = {
  children: "children",
  label: "name",
  value: "code",
};

const categoryCode = ref()

//增行方法
let addRow = () => {
  tableData.value.push({
    goodsId: "",
    goodsname: "",
    unit: "",
    warehouse: "",
    num: 0,
    price: 0,
    rate: 0,
    rateMoney: 0,
    money: 0,
    note: "",
    show: {},
  });
};

//删除方法
let remove = (r) => {
  tableData.value = tableData.value.filter((item) => {
    return item != r;
  });
};


//初始化方法 表格2行
let init = () => {
  for (let i = 1; i <= 2; i++) {
    addRow();
  }
};

//上次点击的是哪一行
const lastRow = ref({});

//表格双击事件
let dbcell = (row, column) => {
  //如果不为空 清除
  if (lastRow.value.show != undefined) {
    lastRow.value.show = {};
  }

  let tmp = column.property;
  row.show[tmp] = true;
  //记录双击的这一行
  lastRow.value = row;
};
//查询分类树
let initTree = async () => {
  let res = await querytree()

  if (res.code == 200) {
    tree.value = res.data;
  }

}

//生命周期
onMounted(async () => {
  await initTree()
  await init()
})
</script>


<style scope>
* {
  padding: 0;
  margin: 0;
}

.main {
  width: 90%;
  height: 100%;
  border: 1px solid #e0e0e0;
  background-color: #fff
}

.mod {
  margin-top: 50px;
  margin-left: 100px;
}


.cols {
  /* border: 1px solid red; */
  border-right: 1px solid #e0e0e0;
}

.sel {
  width: 220px;
}

.inp {
  width: 300px;
  height: 40px;
}

.ic {
  float: left;
  margin-left: 3px;
}
</style>